﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comet demo</title>
<script type="text/javascript" src="myAjaxClass.js"></script>
<script language="javascript">
window.onload = function(){

	var URL = "s.php";	
	var timestamp = 0;
	var SB = document.getElementById("Send");
	
	var obj = new AjaxClass(); //实例化Ajax类创建对象

	var Show = function(rData)
  	{	
		if(rData == undefined){ 
				document.getElementById('tip').innerHTML += '<div>没有任何数据返回！错误：可能服务端有问题</div>';	
		}else{
			if(rData["timestamp"] != undefined){ //有消息数据返回成功,写入HTML		
					timestamp = rData["timestamp"];
					document.getElementById('content').innerHTML += '<div>' + obj.enHTML(rData["msg"]) + '</div>'; //调用自定义的Ajax类里面的enHTML方法对返回的数据进行HTML编码再插入HTML当中
					setTimeout(EmptyQuery(),200); //0.2秒后调用空询函数去监听别人发的消息
			}
			if(rData["write"] == "successed"){  //写入数据成功, 即消息发送成功。
					document.getElementById('tip').innerHTML += '<div>系统提示：消息发送成功</div>';	
			}		
			if(rData["write"] == "failed"){
					document.getElementById('tip').innerHTML += '<div>系统提示：消息发送失败，无法写入文件！请检查服务器写入权限</div>';	
			}
		}
  	}
	
	//下面是空询函数,用于建立获取数据的连接，没有新消息发来时这个连接将被服务端阻塞
	var EmptyQuery = function (){
			obj.Get(URL+"?timestamp="+timestamp, Show, 'json'); 
		}
	//下面是发送消息函数
	var Send = function (){ 
		var DataStr = obj.enURI(document.getElementById("word").value); //调用自定义的Ajax类里面的enURL方法对要提交的数据进行编码再提交
		DataStr = "msg="+DataStr+"&timestamp="+timestamp; 
		obj.Get(URL+"?"+DataStr, Show, 'json'); 
		document.getElementById("word").value = '';	
	}
	
	SB.onclick = Send;
	EmptyQuery(); //第一次运行先发出一个空询获取消息
 	
}
</script>
</head>
<body>
<div id="content"></div>
	<form action="" >
      <input type="text" name="msg" id="word" value="" />
      <input id="Send" type="button" value="Send" />
    </form>
<div id="tip"></div>
</body>
</html>